<div class="layui-fluid layui-anim febs-anim" id="main-cost" lay-title="主表明细">
    <div class="febs-container layui-card">
        <div class="layui-card-body">
            <div id="query-project-form">
                <form class="layui-form layui-table-form" lay-filter="main-cost-table-form" id="main-cost-table-form">
                    <div class="layui-row">
                        <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">年份</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" name="year" id="date-select">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">月份</label>
                                    <div class="layui-input-inline">
                                        <select name="month" lay-verify="select-month">
                                            <option value="01">一月</option>
                                            <option value="02">二月</option>
                                            <option value="03">三月</option>
                                            <option value="04">四月</option>
                                            <option value="05">五月</option>
                                            <option value="06">六月</option>
                                            <option value="07">七月</option>
                                            <option value="08">八月</option>
                                            <option value="09">九月</option>
                                            <option value="10">十月</option>
                                            <option value="11">十一月</option>
                                            <option value="12">十二月</option>
                                            <option value="balance">差额</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">查询</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain  table-action" id="query-detail">
                                            <i class="layui-icon">&#xe848;</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
<!--                <hr class="layui-border-green">-->
            </div>
            <div>
                <div class="layui-collapse" id="cost-detail-info">

                </div>
                <hr class="layui-border-green">
                <div style="text-align:center">
                    <button class="layui-btn" id="detail-submit">保存</button>
                </div>
            </div>

        </div>
    </div>
</div>
<script data-th-inline="none" type="text/javascript">
    let mainSubjectListData,
        detailSubjectListData,
        manualTax = 0,
        costDetailData = {};

    layui.use(['laydate', 'jquery', 'laydate', 'febs', 'form', 'eleTree', 'table', 'validate', 'xmSelect', 'layer'], function () {
        let $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            form = layui.form,
            xmSelect = layui.xmSelect,
            companyXmSelect,
            $view = $('#main-cost'),
            $submit = $view.find('#detail-submit'),
            $query_detail = $view.find('#query-detail'),
            $queryDetailTableForm = $view.find('#main-cost-table-form'),
            $yearMonthDisplay = $view.find('#year_month_display'),
            $costDetailInfo = $view.find('#cost-detail-info'),
            projectInfo = {},
            $layer = layui.layer,
            projectXmSelect;

        laydate.render({
            elem: '#date-select',
            type: 'year'
        });

        form.render();

        $query_detail.on('click', function () {
            let params = $queryDetailTableForm.serializeJson();
            projectInfo = params;
            params.invalidate_ie_cache = new Date();
            params.yearMonth = params.year + "-" + params.month;
            febs.get(ctx + 'mainCost/queryMainCost', params, function (result) {
                mainSubjectListData = result.data;
                //组装元素
                addElement();
                form.render();
                //添加已有的值
                addElementValue(mainSubjectListData);
            })
            return params;
        });

        function addElementValue(mainSubjectListData) {
            for (let i = 0; i < mainSubjectListData.length; i++) {
                let detailCostDTOS = mainSubjectListData[i].detailCostDTOS;
                for (let j = 0; j < detailCostDTOS.length; j++) {
                    let detailSubjectCode = detailCostDTOS[j].detailSubjectCode;
                    let cost = detailCostDTOS[j].cost;
                    let remark = detailCostDTOS[j].remark;
                    let type = detailCostDTOS[j].type;
                    let estimate = detailCostDTOS[j].estimate == 1 ? 1: null;
                    if (cost) {
                        form.val("detail-" + detailSubjectCode + "-" + type, {
                            cost: cost,
                            remark: remark,
                            estimate: estimate
                        });
                    }
                }
            }
        }

        function addElement() {
            let tabs = '';
            let tabTem = '<div class="layui-colla-item"><h2 class="layui-colla-title">{{CHENGBEN}}</h2><div class="layui-colla-content layui-show"><ul>{{DETAILLI}}</ul></div></div>';
            let listr = '<li><div class="layui-form-item layui-form main-cost-form" lay-filter="{{LAYFILTER}}" ><div class="layui-inline">{{nameType}}</div><div class="layui-inline"><label class="layui-form-label layui-form-label-sm">{{unit}}</label><div class="layui-input-inline"><input type="text" name="cost" autocomplete="off" class="layui-input CLASSDISABLED " style="" DISABLED1 onkeyup="clearNoNum(this)" ></div></div><div class="layui-inline"><label class="layui-form-label layui-form-label-sm">备注</label><div class="layui-input-inline"><textarea rows="2" name="remark"  class="layui-input" ></textarea></div></div><div class="layui-inline"><label class="layui-form-label layui-form-label-sm">预估</label><div class="layui-input-inline"><input type="checkbox" name="estimate" lay-skin="switch" lay-text="是|否" value="1"></div></div></div></li>';
            for (let i = 0; i < mainSubjectListData.length; i++) {
                let lis = '';
                let mainSubjectName = mainSubjectListData[i].name;
                for (let j = 0; j < mainSubjectListData[i].detailCostDTOS.length; j++) {
                    let labelType = '<label class="layui-form-label layui-form-label-md" style="border: solid 2px rgba(255,255,255,0.2)">{{DETAIL_NAME}}</label>'
                    let detailCostDTO = mainSubjectListData[i].detailCostDTOS[j];
                    let str =  listr.replaceAll("{{LAYFILTER}}", "detail-" + detailCostDTO.detailSubjectCode + "-" + detailCostDTO.type);
                    if (detailCostDTO.type === 1) {
                        lis += str.replaceAll("{{nameType}}",labelType).replaceAll("DISABLED1", "").replaceAll("CLASSDISABLED", "");
                    }  else {
                        let disableStyle = 'style="background-color: #f6f6f6"'
                        lis += str.replaceAll("{{nameType}}",labelType).replaceAll("DISABLED1", " disabled=\"disabled\"").replaceAll("CLASSDISABLED", "layui-disabled").replaceAll('style=""', disableStyle);
                    }
                    lis = lis.replaceAll("{{DETAIL_NAME}}", detailCostDTO.detailSubjectName).replaceAll("{{unit}}", detailCostDTO.unit)
                }
                tabs += tabTem.replaceAll("{{CHENGBEN}}", mainSubjectName).replaceAll("{{DETAILLI}}", lis);
            }
            $costDetailInfo.html(tabs);
        }

        $submit.on('click', function () {
            let elementsByClassName = document.getElementsByClassName("main-cost-form");
            let params = [];
            for (let i = 0; i < elementsByClassName.length; i++) {
                let layFilter = elementsByClassName[i].getAttribute("lay-filter");
                if (layFilter) {
                    let temp = layFilter.split("-");
                    let data = form.val(layFilter);
                    let subParams = {};
                    subParams.standardSubCode = temp[1];
                    subParams.cost = data.cost;
                    subParams.remark = data.remark;
                    subParams.estimate = data.estimate;
                    params.push(subParams);
                }
            }
            projectInfo.detailCostListStr=JSON.stringify(params);
            projectInfo.invalidate_ie_cache = new Date();
            febs.post(ctx + 'mainCost/save', projectInfo, function () {
                febs.alert.success('修改成功');
                $query_detail.trigger('click');
            })
        });

    });

    function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
        if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value= parseFloat(obj.value);
        }
    }

</script>